<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./static/css/common.css" />
    <!-- 引入element样式文件 -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- <script src="https://unpkg.com/vue@3"></script> -->
    <script src="./static/js/vue.global.js"></script>
    <!-- 引入element脚本文件 -->
    <script src="./static/element-plus/index.full.js"></script>
    <script src="./static/element-plus/icons-vue.js"></script>
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="4">
              <img src="./static/images/logo.png" />
              <h1>{{title}}</h1>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-menu class="el-menu-d---emo" mode="horizontal" :default-active="activeIndex">
                <el-menu-item index="0">首页</el-menu-item>
                <el-menu-item index="1">文章</el-menu-item>
                <el-menu-item index="2">课程</el-menu-item>
                <el-menu-item index="3">商场</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-input v-model="keywords" placeholder="请输入搜索关键词" />
            </el-col>
            <el-col :span="4">
              <el-link type="primary" underline="never">
                <el-avatar src="./static/images/avatar.png" />
                <p style="padding: 0 20px">{{user.username}}</p>
              </el-link>
            </el-col>
          </el-row>
        </el-header>

        <el-container class="main">
          <!-- 商品列表 -->
          <el-main>
            <el-row :gutter="8">
              <el-col :span="8" v-for="(item,i) in productList" :key="i" style="padding-bottom: 8px">
                <el-card>
                  <img :src="item.img" style="width: 100%" />
                  <p>{{item.name}}</p>
                  <el-row>
                    <el-col :span="12">价格：{{item.price}}</el-col>
                    <el-col :span="12">库存：{{item.stock}}</el-col>
                  </el-row>
                  <el-button @click="addToCart(item)">加入购物车</el-button>
                </el-card>
              </el-col>
            </el-row>
          </el-main>
          <!-- 购物车 -->
          <el-aside>
            <el-card>
              <h2>购物车</h2>
              <div v-if="cartItems.length>0">
                <div v-for="(item,i) in cartItems" :key="i">
                  <el-row>
                    <el-col :span="6"><img :src="item.img" style="width: 100%" /></el-col>
                    <el-col :span="18">{{item.name}}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">价格：{{item.price}}</el-col>
                    <el-col :span="12">
                      <el-input-number v-model="item.count" @click="handleChange(item)" size="small" :min="0" :max="item.stock" style="float: right"></el-input-number>
                    </el-col>
                  </el-row>
                  <el-divider />
                </div>
              </div>
              <el-empty v-else></el-empty>
              <el-row>
                <el-col :span="16">总价：{{totalPrice}}</el-col>
                <el-col :span="8"><el-button type="primary">结算</el-button></el-col>
              </el-row>
            </el-card>
          </el-aside>
        </el-container>

        <el-footer>
          <el-row>
            <el-col :span="8">
              <div><img src="./static/images/logo.png" /></div>
              <div>
                <h1>技术社区</h1>
                <p>致力于构建一个专业的IT技术交流社区</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-button type="text">首页</el-button>
                <el-button type="text">文章</el-button>
                <el-button type="text">课程</el-button>
                <el-button type="text">商场</el-button>
              </div>
              <div>
                <el-button type="text">关于我们</el-button>
                <el-button type="text">使用手册</el-button>
                <el-button type="text">隐私条款</el-button>
                <el-button type="text">建议反馈</el-button>
              </div>
            </el-col>
            <el-col :span="8">
              <h2>联系我们</h2>
              <p>电话：123456789</p>
              <p>邮箱：xxx@xxx.com</p>
            </el-col>
          </el-row>
          <el-row><p style="margin: 20px 0">软件开发工作室版权所有</p></el-row>
        </el-footer>
      </el-container>
    </div>

    <script>
      const App = {
        data() {
          return {
            title: "技术社区",
            activeIndex: 0,
            activeName: 1,
            keywords: "",
            user: {
              name: "张三",
              username: "admin",
              age: 18,
              gender: "男",
              hobby: "",
              job: "前端开发工程师",
              bio: "<h4>程序员的一天</h4><ul><li>需求分析</li><li>编程开发</li><li>测试部署</li></ul>",
            },
            // totalPrice: 0,
            // 商品列表
            productList: [
              {
                type: "徽章",
                name: "IT社区文创 ：「代码新秀闪耀」 荣誉徽章",
                price: 10,
                stock: 200,
                img: "./static/images/product01.png",
              },
              {
                type: "帆布包",
                name: "【it社区文创】「极简主义」帆布包",
                price: 50,
                stock: 100,
                img: "./static/images/product02.png",
              },
              {
                type: "T恤",
                name: "蓝字魔法，解锁IT新风尚——百搭T恤衫",
                price: 60,
                stock: 100,
                img: "./static/images/product03.png",
              },
              {
                type: "笔记本",
                name: "高端皮质IT笔记本，简约设计尽显专业气质",
                price: 30,
                stock: 50,
                img: "./static/images/product04.png",
              },
            ],
            cartItems: [],
          };
        },
        methods: {
          addToCart(item) {
            const cartItem = this.cartItems.find((ci) => ci.name === item.name);
            if (cartItem) {
              cartItem.count++;
            } else {
              this.cartItems.push({ ...item, count: 1 });
            }
            //计算总价
            // this.calcPrice();
          },
          handleChange(item) {
            if (item.count <= 0) {
              const index = this.cartItems.indexOf(item);
              if (index > -1) {
                this.cartItems.splice(index, 1);
              }
            }
            // this.calcPrice();
          },
          // calcPrice() {
          //   this.totalPrice = this.cartItems.reduce((total, item) => {
          //     return (total = total + item.price * item.count);
          //   }, 0);
          // },
        },
        computed: {
          totalPrice(){
            return this.cartItems.reduce((total, item) => {
              return (total = total + item.price * item.count);
            }, 0);
          }
        },
      };

      const app = Vue.createApp(App).use(ElementPlus);
      for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
      }
      app.mount("#app");
    </script>
  </body>
</html>